<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <!-- 
                v-for 循环定义的 临时变量 具有data数据仓库的相同取值特性
                该临时变量只能在当前循环的内部使用
            -->
            <li v-for="name in arr">{{name}}</li>
        </ul>
        <hr>
        <ul>
            <!-- 
                取值表达式 () 实际上就是为当前循环定义多个临时变量
                闭循环的是数组 表达式的第一个变量为数组元素值， 第二个变量为下标
            -->
            <li v-for="(v,i) in arr">{{i}}={{v}}</li>
        </ul>
        <hr>
        <ul>
            <!-- 
                被循环的为对象， 第一个变量是对象的属性值 第二变量是对象属性 键
                第三个变量为迭代累加值 => 用于做编号
             -->
            <li v-for="(v,k,i) in user">{{i}}={{k}}={{v}}</li>
        </ul>
        <hr>
        <ul>
            <!-- 
                当前被循环值为数值：描述循环次数（循环上限）
                历史变量取值 为 从 1 开始的 +1结果
                如果定义表达式
                    第一个变量 为从1 开始的 +1 结果
                    第二变量为 迭代累加值
             -->
            <li v-for="(v,i) in num">{{i}}={{v}}</li>
        </ul>
        <hr>
        <ul>
            <!-- 
                循环制为 string 时， 临时变量取值位字符的每个位置的字符值
                定义表达式
                    第一个变量为 字符的每个位置的字符值
                    第二个变量为 字符所在的下标位置
             -->
            <li v-for="(v,i) in str">{{i}}={{v}}</li>
        </ul>
        <hr>
        <!-- v-for 默认具有响应式效果 关键字 of和in功能相同 -->
        <ul>
            <li v-for=" name of names ">
                <input type="checkbox">
                {{ name }}
            </li>
        </ul>
        <input type="button" value="添加新元素" @click=" addItem()">
        <hr>
        <ul>
            <li v-for="(name,i) of names " v-bind:key="name">
                <input type="checkbox">
                {{ name }}
            </li>
        </ul>
        <!-- 
            1、v-for 默认从循环元素的第一个值开始想页面元素进行值的替换 （效率高）

            2、上述情况会导致 v-for 无法跟踪页面状态
            如果需要跟踪页面状态，对 v-for 添加辅助属性 key，
            key 的取值在一个循环中必须是唯一的  取值为下表或迭代值无效 （效率低）
         -->
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            arr:["tom","jack","alice","mike"],
            user:{
                name:"tom",
                age:23,
                a:"aa"
            },
            num:4,
            str:"abcdefg",
            arr1:[
                {a:1,b:2},
                {c:3,d:4}
            ],
            names:["tom","jack","alice","mike"],
        },
        methods:{
            addItem(){
                this.names.unshift(Math.random());
            }
        }
    })
</script>
</html>